<template>
  <el-container style="height:100%;">
    <el-header>业务分层</el-header>
    <el-container>
      <el-aside>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据分层</span>
              <i class="el-icon-plus btn" @click="addLayer"></i>
            </div>
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              @node-click="nodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <i class="el-icon-plus" @click.stop="() => add(node, data)"></i>
                  <i class="el-icon-edit" @click.stop="() => edit(node, data)"></i>
                  <i class="el-icon-delete" @click.stop="() => del(node, data)"></i>
                </span>
              </span>
            </el-tree>
          </el-card>
        </el-main>
      </el-aside>
      <el-main>
        <v-domain v-if="formName == 'domain'" :id="domainId" :pinfo="domainPinfo" @confirm="reload"></v-domain>
        <v-layer v-if="formName == 'layer'" :id="layerId" @confirm="reload"></v-layer>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import domainForm from "./view/DomainForm";
import layerForm from "./view/LayerForm";
export default {
  components: {
    //自定义标签
    "v-domain": domainForm,
    "v-layer": layerForm
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.loadTreeData();
  },
  methods: {
    reload() {
        this.$message({
          showClose: true,
          message: '保存成功',
          type: 'success'
        });
      this.formName = "";
      this.loadTreeData();
    },
    addLayer() {
      this.layerId = null;
      this.formName = "layer";
    },
    add(node, data) {
      this.domainId = null;
      this.domainPinfo = {
        name: data.name,
        domainId: data.type == "layer" ? null : data.id,
        layerId: data.type == "layer" ? data.id : null
      };
      this.formName = "domain";
    },
    edit(node, data) {
      if (data.type == "layer") {
        this.layerId = data.id;
        this.formName = "layer";
      } else {
        this.domainId = data.id;
        this.domainPinfo = {
          name: node.parent.data.name
        };
        this.formName = "domain";
      }
    },
    nodeClick(data, node){
      if (data.type == "layer") {
        this.layerId = data.id;
        this.formName = "layer";
      } else {
        this.domainId = data.id;
        this.domainPinfo = {
          name: node.parent.data.name
        };
        this.formName = "domain";
      }
    },
    del(node, data) {
      this.deleteTreeItem(data.id, data.type);
    },
    deleteTreeItem(id, type) {
      let _this = this;
      this.axios
        .post(this.HOST + "/" + type + "/delete", {
          id: id
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
          } else {
            _this.reload();
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    loadTreeData() {
      let _this = this;
      this.axios
        .post(this.HOST + "/layer/tree")
        .then(function(res) {
          _this.data = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },

  data() {
    return {
      formName: "",
      layerId: null,
      domainId: null,
      domainPinfo: {},
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
</style>
